<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style>
        .box {
            padding: 0 50px;
            display: flex;
            flex-direction: column;
        }

        .title {
            width: 100%;
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            color: #e6c678;
        }

        .form {
            width: 100%;
            /* flex: 1; */
        }

        .table {
            padding-bottom: 20px;
            flex: 1;
        }

        .table table tr td {
            text-align: center;
        }

        .van-field {
            width: 33.33%;
            float: left;
        }

        .van-cell {
            background-color: transparent;
        }

        .van-field__control {
            border-bottom: 2px solid #e6c678;
        }

        .van-cell::after {
            border-bottom: 0;
        }

        input {
            background: none;
            outline: none;
            border: none;
        }

        .bottomBtns {
            display: flex;
        }

        .bottomBtns .bottomBtn_L {
            flex: 1;
            padding-right: 10px;
        }

        .bottomBtns .bottomBtn_R {
            flex: 1;
            padding-left: 10px;
        }

        .bottomBtns .bottomBtn_R .van-botton {
            float: right;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <div class="title">加料含水量测试单</div>
            <div class="form">
                <van-field v-model="formData.empolorName" label="实测人员：" readonly></van-field>
                <van-field v-model="formData.class" label="班次：" readonly @click="classShow = true" placeholder="请选择班次">
                </van-field>
                <van-field v-model="formData.EquipmentName" label="机台号：" readonly @click="openBaseScreen('机台')">
                </van-field>
                <van-field v-model="formData.ProjectName" required label="项目：" placeholder="请输入项目"></van-field>
                <van-field v-model="formData.ProductName" label="产品名称：" readonly @click="openBaseScreen('产品')"
                    placeholder="请选择产品">
                </van-field>
                <van-field v-model="formData.ApproveName" label="审核人：" readonly placeholder="请选择审核人"></van-field>
                <van-field v-model="formData.StartTime" label="开始加料日期：" readonly></van-field>
                <van-field v-model="formData.TestAgainVal" required label="重复测量：" placeholder="请选择是否重复测量" readonly
                    @click="showTestAgain = true"></van-field>
                <van-field v-model="formData.ResultVal" label="测试结果：" placeholder="测试结果汇总" readonly></van-field>
            </div>

            <div class="table">
                <table>
                    <tr>
                        <th>操作</th>
                        <th>序号</th>
                        <th>原材料</th>
                        <th>含水量标准(%)</th>
                        <th>实测含水量</th>
                        <th>备注</th>
                        <th>测试结果</th>
                    </tr>
                    <tr v-for="(item, index) in tableData">
                        <td>
                            <van-icon size="25" name="delete" color="#ee0a24" @click="deleteTable(index)"></van-icon>
                        </td>
                        <td>{{index + 1}}</td>
                        <td @click="openBaseScreen('原材料', index)">{{item.ProductName}}</td>
                        <td>{{item.TestStandardNUM}}</td>
                        <td>
                            <input style="width: 100%;" type="text" v-model="item.TestingNUM"
                                @blur="handlerTestingNUM(item, index)"></input>
                        </td>
                        <td>
                            <input style="width: 100%;" type="text" v-model="item.Remark"></input>
                        </td>
                        <td>{{item.TestresultVal}}</td>
                    </tr>
                </table>
            </div>
            <div class="bottomBtns">
                <div class="bottomBtn_L">
                    <van-button color="linear-gradient(#fffeaa, #c07d39)" type="primary" block @click="addRow">
                        新 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 增
                    </van-button>
                </div>
                <div class="bottomBtn_R">
                    <van-button color="linear-gradient(#fffeaa, #c07d39)" type="primary" block @click="submit">
                        保 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 存
                    </van-button>
                </div>

            </div>
        </div>
        <van-action-sheet v-model="classShow" :actions="classOptions" @select="onSelectClass"></van-action-sheet>
        <van-action-sheet v-model="showTestAgain" :actions="testAgainOptions" @select="onSelectTestAgain">
        </van-action-sheet>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        api.addEventListener({
            name: 'selectRow'
        }, function (ret, err) {
            var type = ret.value.type;
            var row = ret.value.row;
            if (type == '产品') {
                vm.formData.ProductName = row.ProductName;
                vm.formData.ProductID = row.ProductID;
                vm.formData.ProductCode = row.ProductCode;
                vm.formData.ProductSpec = row.ProductSpec;

                APP.ajax('getZS_ProductBOM', { ProductCode: row.ProductCode }, function (res) {
                    res.ds.map((item) => {
                        item.TestStandardNUM = item.TestStandardNUM * 100 + '%'
                    })
                    vm.tableData = res.ds
                })

            } else if (type == '机台') {
                vm.formData.EquipmentName = row.EquipmentName;
                vm.formData.EquipmentID = row.EquipmentID;
            } else if (type == '原材料') {
                vm.tableData[vm.currentIndex].ProductName = row.ProductName;
                vm.tableData[vm.currentIndex].InvCode = row.ProductCode;
            }
        })

        vm = new Vue({
            el: '#app',
            data: {
                formData: {
                    empolorName: window.localStorage.getItem('loginName'),
                    EquipmentName: api.pageParam.equipment.EquipmentName,
                    EquipmentID: api.pageParam.equipment.EquipmentID,
                    ProductName: '',
                    ProductID: '',
                    ProductCode: '',
                    ProductSpec: '',
                    class: api.pageParam.classOption,
                    WhiteORNight: api.pageParam.classOption == '白班' ? 0 : 1,
                    StartTime: APP.getFormatDay(new Date()),
                    ApproveName: '',
                    ApproveID: '',
                    ResultVal: '',
                    Result: '',
                    TestAgainVal: '',
                    TestAgain: '',
                    ProjectName: ''
                },
                classShow: false,
                classOptions: [
                    {
                        value: '0',
                        name: '白班'
                    },
                    {
                        value: '1',
                        name: '晚班'
                    }
                ],
                showTestAgain: false,
                testAgainOptions: [
                    {
                        name: '是',
                        value: 1
                    },
                    {
                        name: '否',
                        value: 0
                    }
                ],
                tableData: [
                    {
                        ProductName: '',
                        InvCode: '',
                        ProductSpec: '',
                        TestStandardNUM: '',
                        TestingNUM: '',
                        TestresultVal: '',
                        Testresult: '',
                    }
                ],
                currentIndex: 0
            },
            created: function () {
                var that = this;
                console.log('waterAPI', JSON.stringify(api.pageParam))
                if (window.localStorage.getItem('clientHeight') != 752) {
                    document.getElementById('app').style.zoom = 0
                } else {
                    document.getElementById('app').style.zoom = 1.5
                }

                if (window.localStorage.getItem('loginName')) {
                    APP.ajax('getZS_WTAppover', { UserName: window.localStorage.getItem('loginName') }, function (res) {
                        if (res.ds.length) {
                            that.formData.ApproveName = res.ds[0].EmplName1
                            that.formData.ApproveID = res.ds[0].ApproveID
                        }
                    })
                }

                that.formData.TestAgain = that.testAgainOptions[1].value
                that.formData.TestAgainVal = that.testAgainOptions[1].name
            },
            methods: {
                openBaseScreen(str, index) {
                    var that = this
                    var obj;
                    if (str == '产品') {
                        obj = {
                            allowClear: false,
                            showSearch: true,
                            searchKey: '',
                            serverSearch: false,
                            searchBy: ['ProductName', 'ProductCode'],
                            isPaging: false,
                            type: str,
                            cmd: 'ZS_getProductList',
                            param: {
                            }
                        }
                    } else if (str == '机台') {
                        obj = {
                            allowClear: false,
                            showSearch: true,
                            searchKey: '',
                            serverSearch: false,
                            searchBy: ['EquipmentName', 'EquipmentID', 'EquipmentCode'],
                            isPaging: false,
                            type: str,
                            cmd: 'getZSEquipment',
                            param: {
                            }
                        }
                    } else if (str == '原材料') {
                        that.currentIndex = index
                        obj = {
                            allowClear: false,
                            showSearch: true,
                            searchKey: '',
                            serverSearch: false,
                            searchBy: ['ProductName', 'ProductCode'],
                            isPaging: false,
                            type: str,
                            cmd: 'ZS_getMaterialList',
                            param: {
                            }
                        }
                    }

                    api.openWin({
                        name: 'baseScreen',
                        url: 'common/baseScreen.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: obj
                    })
                },
                onSelectClass(val) {
                    var that = this
                    that.formData.WhiteORNight = val.value
                    that.formData.class = val.name
                    that.classShow = false
                },
                onSelectTestAgain(val) {
                    var that = this
                    that.formData.TestAgainVal = val.name
                    that.formData.TestAgain = val.value
                    that.showTestAgain = false
                },
                handlerTestingNUM(testItem, testIndex) {
                    var that = this
                    if (testItem.TestingNUM) {
                        var reg = /^\d+(?=\.{0,1}\d+$|$)/
                        var regFlag = reg.test(testItem.TestingNUM)
                        if (regFlag) {
                            var testVal = testItem.TestStandardNUM.split('%')[0]
                            if (testItem.TestingNUM > testVal) {
                                testItem.Testresult = 0
                                testItem.TestresultVal = '不合格'
                            } else {
                                testItem.Testresult = 1
                                testItem.TestresultVal = '合格'
                            }
                            testItem.TestingNUM = testItem.TestingNUM + '%'
                        } else {
                            vm.$toast('请输入正确的数值！')
                            testItem.TestingNUM = ''
                        }
                    } else if (!testItem.TestingNUM) {
                        testItem.Testresult = ''
                        testItem.TestresultVal = ''
                    }

                    that.formData.ResultVal = '合格'
                    that.formData.Result = 1
                    that.tableData.map((item) => {
                        if (item.TestresultVal == '不合格') {
                            that.formData.ResultVal = '不合格'
                            that.formData.Result = 0
                        }
                    })
                },
                deleteTable(index) {
                    var that = this
                    that.tableData.splice(index, 1)
                },
                addRow() {
                    var that = this
                    var newTable = {
                        ProductName: '',
                        InvCode: '',
                        ProductSpec: '',
                        TestStandardNUM: '',
                        TestingNUM: '',
                        TestresultVal: '',
                        Testresult: '',
                    }
                    that.tableData.push(newTable)
                },
                submit() {
                    var that = this
                    var mainObj = {
                        EquipmentID: that.formData.EquipmentID,
                        ProductCode: that.formData.ProductCode,
                        ProductSpec: that.formData.ProductSpec,
                        empolorName: that.formData.empolorName,
                        ProductID: that.formData.ProductID,
                        StartTime: APP.getFormatDate(new Date()),
                        ApproveName: that.formData.ApproveName,
                        TestAgain: that.formData.TestAgain,
                        WhiteORNight: that.formData.WhiteORNight,
                        ProjectName: that.formData.ProjectName,
                        Result: that.formData.Result
                    }
                    // console.log('mainObj', JSON.stringify(mainObj))
                    APP.ajax('getZS_WaterTest', mainObj, function (mainRes) {
                        // console.log('mainRes', JSON.stringify(mainRes))
                        var ID = mainRes.ds[0].Column1
                        that.tableData.map((item) => {
                            var subObj = {
                                TestingNUM: item.TestingNUM.split('%')[0] * 100,
                                TestStandardNUM: item.TestStandardNUM.split('%')[0] * 100,
                                MaterialCode: item.InvCode,
                                Remark: item.Remark,
                                Testresult: item.Testresult,
                                ZS_WaterContentID: ID,
                                Result: that.formData.Result,
                            }
                            // console.log('subObj', JSON.stringify(subObj))
                            APP.ajax('getZS_WaterTestDel', subObj, function (res) {
                                // console.log('res', JSON.stringify(res))
                                vm.$toast('保存成功！')
                                api.sendEvent({
                                    name: 'refreshBrowser',
                                    extra: {
                                        clearName: api.pageParam.name
                                    }
                                })
                                api.closeFrame()
                            })
                        })


                    })
                }
            }
        })
    };
</script>

</html>